<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        Horizontal Scroll
        <text>\n横向滚动</text>
      </view>
      <view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<!-- <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view> -->
          <u-table>
            <u-tr  class="scroll-view-item uni-bg-red">
              <u-th class="table-header" width="50%">项目</u-th>
              <u-th class="table-header" width="30%">当前项目阶段</u-th>
              <u-th class="table-header" width="20%">完成进度</u-th>
            </u-tr>
            <u-tr  class="scroll-view-item uni-bg-red" v-for="(item, index) in milepostData" :key="index">
              <u-td class="table-content" width="50%">{{ item['项目'] }}</u-td>
              <u-td class="table-content" width="30%">{{ item['阶段'] }}</u-td>
              <u-td class="table-content" width="20%">{{ item['完成进度(%)'] }}%</u-td>
            </u-tr>
          </u-table>
				</scroll-view>
			</view>
      <view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" >
          <u-table>
            <u-tr  class="scroll-view-item_H uni-bg-red">
              <u-th class="table-header" width="50%">项目</u-th>
              <u-th class="table-header" width="30%">当前项目阶段</u-th>
              <u-th class="table-header" width="20%">完成进度</u-th>
            </u-tr>
            <u-tr  class="scroll-view-item_H uni-bg-red" v-for="(item, index) in milepostData" :key="index">
              <u-td class="table-content" width="50%">{{ item['项目'] }}</u-td>
              <u-td class="table-content" width="30%">{{ item['阶段'] }}</u-td>
              <u-td class="table-content" width="20%">{{ item['完成进度(%)'] }}%</u-td>
            </u-tr>
          </u-table>
        </scroll-view>
      </view>
      <view class="uni-common-pb"></view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      milepostData: [
        {
          项目: '浙江水泥',
          阶段: '第四季度优化落地跟踪总结',
          '完成进度(%)': 41,
        },
        {
          项目: '江西南方煤炭供应链优化项目2023',
          阶段: '6.系统部署',
          '完成进度(%)': 33,
        },
        {
          项目: '祁连山水泥生产场景建模优化项目',
          阶段: '系统部署',
          '完成进度(%)': 4,
        },
        {
          项目: '上峰水泥配料-独山',
          阶段: '7.系统试运行',
          '完成进度(%)': 86,
        },
        {
          项目: '玉山南方水泥配比优化项目2023',
          阶段: '6.系统部署',
          '完成进度(%)': 50,
        },
        {
          项目: '玉山南方熟料强度预测项目2023',
          阶段: '6.系统部署',
          '完成进度(%)': 20,
        },
        {
          项目: '场景2生料工序电耗优化',
          阶段: '试运行验证',
          '完成进度(%)': 20,
        },
        {
          项目: '场景3出窑熟料游离钙预测',
          阶段: '正式上线',
          '完成进度(%)': 66,
        },
        {
          项目: '场景4出窑熟料3，28天强度预测',
          阶段: '正式上线',
          '完成进度(%)': 69,
        },
        {
          项目: '场景5熟料煤耗优化',
          阶段: '试运行验证',
          '完成进度(%)': 33,
        },
      ],
    };
  },
  methods: {
    upper: function (e) {
      console.log(e);
    },
    lower: function (e) {
      console.log(e);
    },

  
  },
};
</script>
<style>
.scroll-Y {
  height: 300rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item_H {
  display: inline-block;
}
.uni-bg-red {
  background-color: red;
}
.uni-bg-green {
  background-color: green;
}
.uni-bg-blue {
  background-color: blue;
}
</style>

